import { mapValues, without } from "lodash-es";
export interface CommonComponentProps {
  // 行为
  actionType: string;
  url: string;
  // 尺寸
  height: string;
  width: string;
  paddingLeft: string;
  paddingRight: string;
  paddingTop: string;
  paddingBottom: string;
  // 边框样式
  borderStyle: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  // 阴影 透明度
  boxShadow: string;
  opacity: string;
  // 位置
  position: string;
  left: string;
  top: string;
  right: string;
}

export interface TextComponentProps extends CommonComponentProps {
  text: string;
  fontSize: string;
  fontFamily: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string;
  lineHeight: string;
  textAlign: string;
  color: string;
  backgroundColor: string;
}
export interface ImageComponentProps extends CommonComponentProps {
  src: string;
}

export declare type AllComponentProps = TextComponentProps &
  ImageComponentProps;

export const commonDefaultProps: CommonComponentProps = {
  // 行为
  actionType: "",
  url: "",
  // 尺寸
  height: "",
  width: "373px",
  paddingLeft: "0px",
  paddingRight: "0px",
  paddingTop: "0px",
  paddingBottom: "0px",
  // 边框样式
  borderStyle: "none",
  borderColor: "#000",
  borderWidth: "0",
  borderRadius: "0",
  // 阴影 透明度
  boxShadow: "0 0 0 #000000",
  opacity: "1",
  // 位置
  position: "absolute",
  left: "0",
  top: "0",
  right: "0",
};

export const textDefaultProps: TextComponentProps = {
  // 基本参数 -
  text: "正文内容",
  fontSize: "14px",
  fontFamily: "",
  fontWeight: "normal",
  fontStyle: "normal",
  textDecoration: "none",
  lineHeight: "1",
  textAlign: "left",
  color: "#000000",
  backgroundColor: "",
  ...commonDefaultProps,
};

export const imageDefaultProps: ImageComponentProps = {
  src: "test.url",
  ...commonDefaultProps,
};
// 获取 文本组件 除其他属性外的 样式属性
export const textStylePropNames = without(
  Object.keys(textDefaultProps),
  "actionType",
  "url",
  "text"
);
export const imageStylePropsNames = without(
  Object.keys(imageDefaultProps),
  "src"
);

export const transformToComponentProps = <T extends {}>(props: T) => {
  return mapValues(props, (item) => {
    return {
      type: (item as any).constructor as StringConstructor,
      default: item,
    };
  });
};
